openlayers加载tms切片图层

您所在的位置:网站首页 openlayer3 加载百度瓦片 openlayers加载tms切片图层

openlayers加载tms切片图层

2024-07-15 10:30| 来源: 网络整理| 查看: 265

TMS服务主要分为谷歌TMS瓦片和标准TMS瓦片的切片,根据网上找到的资料ol3舍弃了直接加载TMS服务的方法,但是可以通过类似于加载WMS瓦片的形式来加载TMS瓦片地图。网上很多资料说加载瓦片地图的方式如下:

谷歌TMS瓦片加载:

new ol.layer.Tile({     source: new ol.source.XYZ({         tileUrlFunction: function (tileCoord) {             var z = tileCoord[0];             var x = tileCoord[1];             var y = - tileCoord[2];             return "http://localhost:8080/map/谷歌TMS/" + z + "/" + x + "/" + y + ".png";         }     }) })

标准TMS瓦片的加载:

new ol.layer.Tile({     source: new ol.source.XYZ({         tileUrlFunction: function (tileCoord) {             var z = tileCoord[0];             var x = tileCoord[1];             y = Math.pow(2, z) + tileCoord[2] - 1;             return "http://localhost:8080/map/标准TMS/" + z + "/" + x + "/" + y + ".png";         }     }) })

也就是需要对y的值进行重新计算,以上两种方式确实可以加载出来,但是不知道是不是我ol的版本问题,加载出来的地图始终跟我的底图偏移了(相同坐标系情况下),可能是我ol版本比较低,另外一种加载方式解决了本人的问题,加载方式如下:

标准TMS瓦片加载:

source: new ol.source.XYZ({ /**标准TMS服务**/ url: 'http://192.168.123.1:8080/map/{z}/{x}/{-y}.png' })

谷歌TMS瓦片加载:

source: new ol.source.XYZ({ /**谷歌TMS服务**/ url: 'http://192.168.123.1:8080/map/{z}/{x}/{y}.png' })

最开始我使用的是第一种加载方式,确实加载出来了,但是位置对不上,一度认为是坐标系不一致的问题,改了大半天,换了种加载方式就好了,希望有帮助。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3